let cups = document.querySelectorAll(".cup");
let fill = document.querySelector(".fill");
let empty = document.querySelector(".empty");
let total = document.querySelector(".total");
let r = 0;

cups.forEach((cup, idx) => {
  cups[idx].addEventListener("click", () => {
    if (cups[idx].classList.contains("active") && !removeActive(idx + 1)) {
      r = idx;
      cups[idx].classList.remove("active");
    } else {
      cups[idx].classList.add("active");
      r = idx + 1;
    }
    let h1 = 40 * r;
    let h2 = 40 * (8 - r);
    fill.textContent = 12.5 * r + "%";
    fill.style.height = h1 + "px";

    empty.style.height = h2 + "px";
    total.textContent = 0.25 * (8 - r) + "L";
    addActive(idx);
  });
});
function removeActive(start) {
  let flag = false;
  for (let i = start; i < 8; i++) {
    if (cups[i].classList.contains("active")) {
      cups[i].classList.remove("active");
      flag = true;
    }
  }
  return flag;
}
function addActive(end) {
  for (let i = 0; i < end; i++) {
    if (!cups[i].classList.contains("active")) {
      cups[i].classList.add("active");
    }
  }
}
